<template>
  <div class="dictionary p-8" v-show="props.show">
    <div class="header flex justify-between">
      <div>字典</div>
      <div><close-outlined @click="onClose" /></div>
    </div>
    <a-divider class="my-4"></a-divider>
    <div class="mb-4 relative">
      <div class="flex justify-between align-center">
        <!-- 编辑组的时候显示 -->
        <span v-if="!groupMode">
          <a-button type="primary" ghost size="small" @click="newGroup"> 新建组 </a-button>
        </span>
        <!-- 编辑信息的时候显示 -->
        <span v-else class="flex gc-2 align-center">
          <span @click="groupMode = false" class="cursor-pointer">
            <CaretLeftOutlined />
            返回
          </span>
          <a-button type="primary" ghost size="small" @click="dictionaryConfig.show = true">
            新建属性
          </a-button>
        </span>

        <div class="flex gc-2 align-center">
          <a-button @click="setTemplateGroup" size="small" ghost v-if="templateMode">
            <a-tooltip>
              <template #title> 一键使用各种已经定义好的模板 </template>
              <InfoCircleOutlined class="text-666" />
            </a-tooltip>
            <span class="text-666">模板组</span>
          </a-button>
          <a-button @click="setCustomMode" size="small" ghost v-else>
            <span class="text-666">自定义模板</span>
          </a-button>
          <a-button @click="exportGroup" size="small" ghost>
            <span class="text-666">导出组</span>
          </a-button>
          <a-button type="danger" @click="deleteAllGroup" size="small" ghost>清空所有组</a-button>
        </div>
      </div>
      <InDialog class="mt-2" v-model:show="dictionaryConfig.show" theme="dark" title="新建属性">
        <div class="flex flex-col gr-2">
          <InListItem>
            <div>输入键</div>
            <div>
              <a-input
                size="small"
                style="width: 120px"
                v-model:value="dictionaryConfig.key"
                @input="dictionaryConfig.value = dictionaryConfig.key"
              ></a-input>
            </div>
          </InListItem>
          <InListItem>
            <div>输入值</div>
            <div>
              <a-input
                size="small"
                style="width: 120px"
                v-model:value="dictionaryConfig.value"
              ></a-input>
            </div>
          </InListItem>
          <InListItem>
            <div>输入描述信息</div>
            <div>
              <a-textarea size="small" style="width: 120px" v-model:value="dictionaryConfig.desc" />
            </div>
          </InListItem>
          <a-button type="primary" size="small" @click="saveNewDictionay">保存</a-button>
        </div>
      </InDialog>

      <InDialog theme="dark" title="编辑组" class="mt-2" v-model:show="groupConfig.show">
        <div class="flex gr-1 flex-col">
          <InListItem>
            <div>组名</div>
            <div>
              <a-input
                size="small"
                style="width: 120px"
                v-model:value="groupConfig.title"
              ></a-input>
            </div>
          </InListItem>
          <InListItem>
            <div>组描述</div>
            <div>
              <a-textarea
                v-model:value="groupConfig.desc"
                size="small"
                style="width: 120px"
              ></a-textarea>
            </div>
          </InListItem>
          <a-button type="primary" size="small" class="mt-1" ghost @click="saveNewGroup">
            确定
          </a-button>
        </div>
      </InDialog>
    </div>
    <!-- 组 -->
    <div class="group-list" v-if="!groupMode">
      <ul class="flex flex-col" v-if="groupList.length > 0">
        <li class="flex p-2 border-1 flex">
          <div class="li-title">标题</div>
          <div>描述</div>
        </li>
        <li
          class="flex p-2 border-1 flex justify-between"
          v-for="item in groupList"
          :key="item.id"
          @click="editGroup(item)"
          draggable="true"
          @dragstart="dragstart(item)"
          @dragover="cancelEvent"
        >
          <div class="flex">
            <div class="text-12 li-title">{{ item.title }}</div>
            <div class="text-999 li-desc"><InText :text="item.desc" desc="没有描述信息" /></div>
          </div>

          <!-- 组的操作 -->
          <div class="actions gc-2 flex flex-s" @click.stop="false" v-show="templateMode">
            <a-tooltip>
              <template #title> 转到模板组 </template>
              <ExportOutlined @click="toTemplate(item)" />
            </a-tooltip>
            <EditOutlined @click="updateGroup(item)" />
            <DeleteOutlined @click="deleteGroupItem(item)" />
          </div>
        </li>
      </ul>
      <div v-else class="flex flex-s">
        <Empty />
      </div>
    </div>
    <!-- 表 -->
    <div v-if="groupMode" class="contextmenu-active">
      <div class="list-header mb-4 flex justify-between text-center">
        <div class="head-item">键</div>
        <div class="head-item">值</div>
        <div class="head-item">描述</div>
        <div class="flex-1">操作</div>
      </div>

      <ScrollItem :height="200">
        <ul class="list-content text-center" v-if="currentGroup.children.length > 0">
          <li
            class="flex mb-4 text-777"
            v-for="item in currentGroup.children"
            @contextmenu="contextmenu(item)"
          >
            <div class="list-item">
              <InText :text="item.key" />
            </div>
            <div class="list-item">
              <InText :text="item.value" />
            </div>
            <div class="list-item">
              <InText :text="item.desc" />
            </div>
            <div class="flex-1">
              <DeleteOutlined @click.stop="deleteDictionay(item)" />
            </div>
          </li>
        </ul>
        <div v-else class="flex flex-s">
          <Empty width="100" />
        </div>
      </ScrollItem>
    </div>

    <InContextmenu
      theme="dark"
      :data="folderMenuData"
      v-if="menuConfig.show"
      :event="menuConfig.event"
      @onClose="menuConfig.show = false"
    />
  </div>
</template>

<script setup lang="ts">
import { contextmenuType, dictionaryGroupType, dictionaryType } from "@/types/project";
import {
  CaretLeftOutlined,
  CloseOutlined,
  DeleteOutlined,
  EditOutlined,
  ExportOutlined,
  InfoCircleOutlined
} from "@ant-design/icons-vue";
import { onMounted, ref } from "vue";
import InListItem from "../components/InListItem.vue";
import ScrollItem from "../components/ScrollItem.vue";
import InContextmenu from "../components/InContextmenu.vue";
import Empty from "../components/InEmpty.vue";
import InDialog from "../components/InDialog.vue";
import {
  addDictionary,
  deleteWord,
  getGroupList,
  clearGroup,
  addGroup,
  deleteGroup
} from "@/store/utils/dictionay";
import { downloadText, uuid } from "@/utils/utils";
import { message } from "ant-design-vue";
import InText from "../components/InText.vue";
import templateGroup from "@/data/groupData/group";
/* 字典组和字典数据切换 */
const groupMode = ref(false);
/* 自定模板和模板市场的模式切换 */
const templateMode = ref(true);

/* 核心组 */
const groupList = ref<Array<dictionaryGroupType>>([]);
/* 设置模板组 */
const setTemplateGroup = () => {
  groupList.value = templateGroup;
  templateMode.value = false;
};
const toTemplate = (item: dictionaryGroupType) => {
  templateGroup.push(item as any);
  message.success("操作成功");
};
const setCustomMode = () => {
  templateMode.value = true;
  resetGroupList();
};
const resetGroupList = () => {
  groupList.value = getGroupList().value;
};
onMounted(() => {
  resetGroupList();
});
/* 拖拽 */
const dragstart = (item: dictionaryGroupType) => {
  const e = window.event as DragEvent;
  e.dataTransfer?.setData("dictionary", JSON.stringify(item));
};
const cancelEvent = (e: Event) => {
  e.preventDefault();
};

/* 拖拽end */

/* 字典数据类型 */
const dictionaryConfig = ref({
  show: false,
  key: "",
  value: "",
  desc: "",
  id: uuid()
});

/* 字典组类型 */
const groupConfig = ref({
  show: false,
  id: uuid(),
  desc: "",
  title: "",
  children: [] as Array<any>
});
/* 菜单属性 */
const menuConfig = ref<contextmenuType>({
  data: [],
  show: false,
  tempData: null,
  event: undefined
});
const contextmenu = (item: dictionaryType) => {
  menuConfig.value.event = window.event as MouseEvent;
  menuConfig.value.show = true;
  menuConfig.value.tempData = item;
};
/* 编辑表 */
const editGroup = (item: dictionaryGroupType) => {
  groupMode.value = true;
  currentGroup.value = item;
};
/* 更新表的内容 */
const updateGroup = (item: dictionaryGroupType) => {
  groupConfig.value = {
    title: item.title,
    show: true,
    id: item.id,
    desc: item.desc,
    children: item.children
  };
};

const currentGroup = ref<dictionaryGroupType>({
  desc: "",
  title: "",
  id: "",
  children: []
});

/* 菜单 */
const folderMenuData = ref([
  {
    text: "删除",
    event() {
      deleteDictionay(menuConfig.value.tempData);
    },
    icon: DeleteOutlined
  }
]);
const emits = defineEmits(["update:show"]);
const onClose = () => {
  emits("update:show");
};
const props = defineProps({
  show: Boolean,
  /*  元数据  */
  sourceData: {
    type: Array<any>
  }
});

/* 删除一项字典值 */
const deleteDictionay = (item: dictionaryType) => {
  deleteWord(item.id, currentGroup.value.id);
  message.success("成功删除");
};
/* 添加新的组 */
const saveNewGroup = () => {
  if (!groupConfig.value.title) {
    resetGroup();
    return;
  }
  addGroup(groupConfig.value);
  resetGroup();
  message.success("操作成功");
};
/* 重置组信息 */
const resetGroup = () => {
  groupConfig.value = {
    show: false,
    id: uuid(),
    desc: "",
    title: "",
    children: []
  };
};
/* 保存字典子数据 */
const saveNewDictionay = () => {
  var { key, value } = dictionaryConfig.value;
  if (key === "" || value == "") {
    dictionaryConfig.value.show = false;
    return;
  }
  addDictionary(dictionaryConfig.value, currentGroup.value);
  dictionaryConfig.value = {
    show: false,
    key: "",
    value: "",
    desc: "",
    id: uuid()
  };
  message.success("保存成功");
};
/* 导出组 */
const exportGroup = () => {
  downloadText(JSON.stringify(templateGroup), "group");
  message.success("导出成功");
};
/* 删除一个组 */
const deleteGroupItem = (item: dictionaryGroupType) => {
  deleteGroup(item.id);
  message.success("删除成功");
  resetGroupList();
};
/* 删除所有组 */
const deleteAllGroup = () => {
  clearGroup();
  groupList.value = [];
  message.success("成功删除");
  groupConfig.value.show = false;
};

/* 打开新建组的对话框 */
const newGroup = () => {
  resetGroup();
  groupConfig.value.show = true;
};
</script>

<style lang="scss" scoped>
.dictionary {
  position: absolute;
  right: 16px;
  width: 600px;
  top: 60px;
  background-color: white;
  color: #333;
  z-index: 10;
  border-radius: 4px;
  min-height: 400px;
}
.list-header {
  border-radius: 2px;
  line-height: 32px;
  background-color: #eee;
}
.list-content {
  li {
    border-radius: 2px;
    border: 1px solid #eee;
    line-height: 28px;
    font-size: 12px;
    &:hover {
      background-color: #faad141a;
    }
  }
  li.active {
    background-color: #faad141a;
    border: 1px solid #faad14;
    color: #faad14;
  }
  input {
    width: 100px;
    border: none;
    border-bottom: 1px solid #eee;
    text-align: center;
    padding-bottom: 5px;
  }
}
.head-item,
.list-item {
  width: 30%;
  height: 100%;
}

.group-list {
  & li:first-child {
    background-color: #f8f8f8;
  }
  li {
    margin-bottom: 4px;
    width: 100%;
    min-height: 32px;
    cursor: pointer;
    border: 1px solid transparent;
    &:hover {
      background-color: #f8f8f8;
      border: 1px solid #eee;
      .actions {
        display: flex;
      }
    }
  }
  .actions {
    display: none;
  }
  .li-title {
    min-width: 100px;
  }
  .li-desc {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
